<template>
  <div class="commodity">
    <!-- 分类列表 -->
    <div ref="menuWrapper">
      <div class="goodsMenu">
        <div
          v-for="(item, index) in foodInfo"
          class="Menu-item Menu-hook"
          :class="{ currentMenu: currentIndex == index }"
          @click="selectItem(index, $event)"
        >
          <span class="itemText">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div ref="foodsWrapper">
      <div class="goodsLists">
        <div class="listOne food-list-hook" v-for="item in foodInfo">
          <h4>{{ item.name }}</h4>

          <div
            class="foodsOne"
            v-for="foods in item.foods"
            @click="showfood(foods, $event)"
          >
            <div class="listImg">
              <img src="~assets/img/蛋糕.jpg" />
            </div>
            <div class="goodInfo">
              <div class="goodsName">{{ foods.name }}</div>
              <div class="goodsDesc">{{ foods.description }}</div>
              <div class="goodsxs">
                <span>{{ foods.tips }}</span>
              </div>
              <div class="foodsPrice">￥5</div>
              <incordec class="goodscount" :food="foods"></incordec>
            </div>
          </div>
        </div>
      </div>
    </div>

    <shoppingcart :selectFoods="selectFoods"></shoppingcart>
    <food ref="thisfood" :selectedfood="selectedfood"></food>
  </div>
</template>

<script>
import BetterScroll from "better-scroll";
import food from "views/restaurant/commodity/food/food.vue";
import incordec from "components/cartcontrol/Incordec.vue";
import shoppingcart from "components/cartcontrol/shoppingcart.vue";

export default {
  name: "commodity",
  components: {
    food,
    incordec,
    shoppingcart,
  },
  props: {
    foodInfo: {
      type: Array,
    },
  },

  data() {
    return {
      listHeight: [],
      scrollY: 0,
      clickEvent: false,
      // 被选择的菜
      selectedfood: {},
    };
  },
  computed: {
    //选中到购物车中的商品数据,由每一个food对象组成
    selectFoods: function () {
      let foods = [];
      this.foodInfo.forEach((item) => {
        item.foods.forEach((fd) => {
          if (fd.count) {
            foods.push(fd);
          }
        });
      });
      return foods;
    },
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        let height = this.listHeight[i];
        let height2 = this.listHeight[i + 1];
        if (!height2 || (this.scrollY >= height && this.scrollY < height2)) {
          if (this.clickEvent) {
            return i;
          } else {
            return i;
          }
        }
      }
      return 0;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this._initScroll();
      this._getHeight();
    });
    this.scroll = new BetterScroll(this.$refs.foodsWrapper, {
      mouseWheel: true,
      click: true,
      tap: true,
    });
  },
  methods: {
    _initScroll() {
      this.lefts = new BetterScroll(this.$refs.menuWrapper, {
        click: true,
      });
      this.rights = new BetterScroll(this.$refs.foodsWrapper, {
        probeType: 3, //探针的效果时时获取滚动高度
      });
      this.rights.on("scroll", (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));
      });
    },
    _getHeight() {
      let rightItems =
        this.$refs.foodsWrapper.getElementsByClassName("food-list-hook");
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < rightItems.length; i++) {
        let item = rightItems[i];
        height += item.clientHeight;
        this.listHeight.push(height);
      }
    },
    selectItem(index, event) {
      this.clickEvent = true;
      if (!event._constructed) {
        return;
      } else {
        let rightItems =
          this.$refs.foodsWrapper.getElementsByClassName("food-list-hook");
        let el = rightItems[index];
        this.rights.scrollToElement(el, 300);
      }
    },

    //点击展示商品详情界面
    showfood(food, event) {
      if (!event._constructed) return false;
      this.selectedfood = food;
      this.$refs.thisfood.showthisfood();
    },
  },
};
</script>

<style scoped>
.commodity {
  position: absolute;
  display: flex;
  width: 100%;
  bottom: 46px;
  top: 280px;
  overflow: hidden;
}
.commodity .goodsMenu {
  flex: 0, 0, 80px;
  width: 80px;
  padding: 0 12px;
  background-color: #eee;

  box-sizing: border-box;
}
.commodity .goodsMenu .Menu-item::after {
  position: absolute;
  content: "";
  width: 100%;
  bottom: 0;
  left: 0;
  border-top: 1px solid rgba(7, 17, 27, 0.1);
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.commodity .goodsMenu .currentMenu {
  /* background-color: #fff; */
  background-color: #fdfdfd;
  color: #000;
  padding: 0 12px;
  margin: -1px 0 0 -12px;
  border: none;
}
.commodity .goodsMenu .Menu-item {
  position: relative;
  display: table;
  width: 100%;
  height: 54px;
  width: 60px;
  overflow: hidden;
}
.commodity .goodsMenu .Menu-item .itemText {
  /* text-align: center; */
  line-height: 14px;
  font-size: 12px;
  color: rgb(85, 85, 85);
  vertical-align: middle;
  display: table-cell;
}
.goodsLists .food-list-hook {
  width: 2000px;
}
.goodsLists .food-list-hook h4 {
  background-color: #fdfdfd;
  margin: 0;
  padding: 8px;
  color: rgb(49, 49, 49);
}
.food-list-hook .foodsOne {
  position: relative;
}
.goodsLists .food-list-hook .foodsOne {
  padding: 10px;
  background-color: #fdfdfd;
}
.goodsLists .food-list-hook .foodsOne .listImg {
  width: 85px;
  height: 85px;
}
.goodsLists .food-list-hook .foodsOne .listImg img {
  width: 100%;
  border-radius: 10px;
}
.goodsLists .food-list-hook .foodsOne .goodInfo {
  position: absolute;
  top: 10px;
  left: 105px;
  font-size: 12px;
}
.goodsLists .food-list-hook .foodsOne .goodInfo .goodsName {
  font-weight: bolder;
  font-size: 14px;
  width: 50px;
  overflow: hidden;
  word-wrap: normal;
  height: 16px;
}
.goodsLists .food-list-hook .foodsOne .goodInfo .goodsDesc {
  color: rgb(240, 107, 35);
  width: 100px;
  height: 14px;
  overflow: hidden;
}
.goodsLists .food-list-hook .foodsOne .goodInfo .goodsxs span {
  display: inline-block;
  color: rgb(119, 119, 119);
}
.goodsLists .food-list-hook .foodsOne .goodInfo .foodsPrice {
  position: absolute;
  font-size: 16px;
  color: #e63434;
  bottom: -30px;
}
.goodsLists .food-list-hook .foodsOne .goodInfo .goodscount {
  position: absolute;
  right: -15px;
  bottom: -30px;
}

</style>